import { Layout, Menu, Dropdown, message } from "antd";
import React, { useState } from "react";
import { Route, useHistory } from "react-router-dom";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  ProjectOutlined,
  GitlabOutlined,
  GoogleOutlined,
  DingtalkOutlined,
  GatewayOutlined,
  DatabaseOutlined,
  AppstoreOutlined,
  OrderedListOutlined,
} from "@ant-design/icons";
import Products from "./Products";
import ProductCategroies from "./ProductCategroies";
import User from "./User";
import { removeToken, resetImg } from "../utils/tool";
import GongGao from "./GongGao";
import Zixun from "./Zixun";
import ZixunC from "./ZixunC";
import Order from "./Order";
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;

function Main() {
  const [collapsed, setCollapsed] = useState(false);
  const history = useHistory();
  function handleMenuClick() {
    removeToken();
    message.info("退出成功");
    history.push("/");
  }
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1" icon={<UserOutlined />}>
        注销
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout style={{ height: "100vh" }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          onClick={({ key }) => {
            history.push(key);
          }}
        >
          <SubMenu key="666" icon={<AppstoreOutlined />} title="产品管理">
            <Menu.Item
              key="/main/Product_Categroies"
              icon={<ProjectOutlined />}
            >
              产品分类
            </Menu.Item>
            <Menu.Item key="/main/products" icon={<GitlabOutlined />}>
              产品信息
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="/main/gonggao" icon={<GoogleOutlined />}>
            公告管理
          </Menu.Item>
          <SubMenu key="62" icon={<DingtalkOutlined />} title="咨询管理">
            <Menu.Item key="/main/zixunC" icon={<GatewayOutlined />}>
              咨询分类
            </Menu.Item>
            <Menu.Item key="/main/zixun" icon={<DatabaseOutlined />}>
              咨询列表
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="/main/order" icon={<OrderedListOutlined />}>
            订单管理
          </Menu.Item>
          <Menu.Item key="/main/users" icon={<UserOutlined />}>
            用户管理
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{ padding: 0, height: 40, paddingLeft: 13 }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )}
          <Dropdown.Button
            style={{ float: "right", margin: "5px 30px" }}
            overlay={menu}
            placement="bottomCenter"
            icon={
              <>
                <img src={resetImg()} alt="头像" style={{ width: 25 }} />
              </>
            }
          >
            超级管理员
          </Dropdown.Button>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            padding: 12,
            minHeight: 280,
            width: "100%",
            overflow: "auto",
          }}
        >
          <Route path="/main/products">
            <Products />
          </Route>
          <Route path="/main/Product_Categroies">
            <ProductCategroies />
          </Route>
          <Route path="/main/gonggao">
            <GongGao />
          </Route>
          <Route path="/main/users">
            <User />
          </Route>
          <Route path="/main/zixun">
            <Zixun />
          </Route>
          <Route path="/main/zixunC">
            <ZixunC />
          </Route>
          <Route path="/main/order">
            <Order />
          </Route>
        </Content>
      </Layout>
    </Layout>
  );
}

export default Main;
